<template>
    <div>
        <div style="position: absolute;color: red;top: 15px;right: 100px">
            <div style="font-size: 14px;color: #fff;display: flex;justify-content: space-around;padding: 0 10px;width:800px;">
                <router-link style="color: #fff;text-decoration: none" to="/">

                    <div class="head1"
                         style="height: 40px;display: flex;flex-direction: column;justify-content:space-around">

                        <div>
                            <i class="el-icon-s-home"></i>
                            首页
                        </div>
                        <div class="bar1" style="width:100%;height:6px;">
                            <div class="bar1-in" style=""></div>

                        </div>

                    </div>
                </router-link>

               <router-link style="text-decoration: none;color: #ffffff!important;" to="/route">
                   <div class="head1"
                        style="height: 40px;display: flex;flex-direction: column;justify-content:space-around">
                       <div>
                           <i class="el-icon-headset"></i>
                           旅游路线
                       </div>
                       <div class="bar1" style="width:100%;height:6px;">
                           <div class="bar1-in" style=""></div>

                       </div>
                   </div>
               </router-link>
                <router-link style="color: #fff;text-decoration: none" to="/hotel">

                <div class="head1"
                     style="height: 40px;display: flex;flex-direction: column;justify-content:space-around">
                    <div>
                        <i class="el-icon-chat-dot-round"></i>
                        酒店住宿
                    </div>
                    <div class="bar1" style="width:100%;height:6px;">
                        <div class="bar1-in" style=""></div>

                    </div>
                </div>
                </router-link>
                <router-link style="color: #fff;text-decoration: none" to="/story">
                    <div class="head1"
                         style="height: 40px;display: flex;flex-direction: column;justify-content:space-around">
                        <div>
                            <i class="el-icon-s-fold"></i>
                            旅行故事
                        </div>
                        <div class="bar1" style="width:100%;height:6px;">
                            <div class="bar1-in" style=""></div>

                        </div>
                    </div>
                </router-link>
                <router-link style="color:#fff;text-decoration: none" to="/contact">

                    <div class="head1"
                         style="height: 40px;display: flex;flex-direction: column;justify-content:space-around">
                        <div>
                            <i class="el-icon-price-tag"></i>
                            联系我们
                        </div>
                        <div class="bar1" style="width:100%;height:6px;">
                            <div class="bar1-in" style=""></div>

                        </div>
                    </div>
                </router-link>
                <router-link style="color:#fff;text-decoration: none" to="/about">

                    <div class="head1"
                         style="height: 40px;display: flex;flex-direction: column;justify-content:space-around">
                        <div>
                            <i class="el-icon-files"></i>
                            关于我们
                        </div>
                        <div class="bar1" style="width:100%;height:6px;">
                            <div class="bar1-in" style=""></div>

                        </div>
                    </div>
                </router-link>


<!--                <router-link style="color:#fff;text-decoration: none" to="/login">-->

<!--                    <div class="head1"-->
<!--                         style="height: 40px;display: flex;flex-direction: column;justify-content:space-around">-->
<!--                        <div>-->
<!--                            <i class="el-icon-user"></i>-->
<!--                            登录-->
<!--                        </div>-->
<!--                        <div class="bar1" style="width:100%;height:6px;">-->
<!--                            <div class="bar1-in" style=""></div>-->

<!--                        </div>-->
<!--                    </div>-->
<!--                </router-link>-->

<!--                <router-link style="color:#fff;text-decoration: none" to="/register">-->

<!--                    <div class="head1"-->
<!--                         style="height: 40px;display: flex;flex-direction: column;justify-content:space-around">-->
<!--                        <div>-->
<!--                            <i class="el-icon-user"></i>-->
<!--                            注册-->
<!--                        </div>-->
<!--                        <div class="bar1" style="width:100%;height:6px;">-->
<!--                            <div class="bar1-in" style=""></div>-->

<!--                        </div>-->
<!--                    </div>-->
<!--                </router-link>-->

            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Header"
    }
</script>

<style lang="less" scoped>
    .head1 {
        cursor: pointer;
    }
    .head1:hover .box1{
        background-color: #ffffff;
        display: block;
    }
    .head1:hover .box2{
        display: block;
        /*display: ;*/
        background-color: #fff;
    }
    .box1:hover{
        background-color: #4AB1F4;
    }
    .box2:hover{
        background-color: #4AB1F4;

    }
    .box1 {
        transition: all 0.4s;
            display: none;
    }
    .box2{
        transition: all 0.4s;

        display: none;
    }

    .box1:hover {

    }

    @keyframes grow {
        0% {

        }
        25% {
            width: 25%;
        }
        50% {
            width: 50%;
        }
        75% {
            width: 75%;
        }
        100% {
            width: 100%;
        }
    }

    .bar1-in {
        transition: all 0.4s;
        width: 0;
        height: 100%;
        background-color: #80C8F8;

    }

    .head1:hover .bar1-in {
        background-color: #80C8F8;
        height: 100%;
        width: 100%;
    }

    @keyframes w {
        0% {
        }

        100% {
            width: 200px;

        }
    }

    #div {
        overflow: hidden;
        width: 0;
        height: 30px;
        font-size: 20px;
        /* 让我们文字强制一行显示 */
        white-space: nowrap;
        /* background-color: pink; */
        /* step是分步长显示，这里是分10步 */
        animation-direction: alternate-reverse;
        animation: w 2s steps(8) forwards;
        animation-iteration-count: 10000;
        /* aniam */
    }

    .el-main {
        /*background-color: pink;*/
        /*background-image: url("public/img/img1")*/
        /*background-image: url("@/");*/
        background-repeat: no-repeat;
        background-size: cover;
        /*background-image: url("../assets/下载.png");*/
        background-image: url("../../assets/img/192111.jpg");
        /*background-image: url("../../assets/192111.jpg")*/
    }

    .el-header {
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .background-middle {
        position: absolute;
        left: 490px;
        z-index: 1000;
        width: 720px;
        height: 280px;
        /*background-color: pink;*/
        top: 200px;
    }

    .index-background {
        h1 {

        }

    }

    .ground {
        /*position: relative;*/
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 100vh;
        /*background-color: pink;*/
        /*background-image: url("https://api.dujin.org/bing/1920.php");*/
        /*background-image: url("../../assets/background/1.jpg");*/
        background-repeat: no-repeat;
        background-image: url("../../assets/img/backround/1.jpg");
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #img:hover {
        transform: rotate(-360deg);
    }
</style>

